<template>
	<view>
		<view class="container">
			<view class="option">
				<view class="photo common" @tap="choicePhoto('album')">
					<view class="border">
						<image src="../../static/images/cheat/more_picture.png" mode=""></image>
					</view>
					<view class="title">图片</view>					
				</view>
				<view class="greph common" @tap="choicePhoto('camera')">
					<view class="border">
						<image src="../../static/images/cheat/more_potogreph.png" mode=""></image>
					</view>
					<view class="title">拍摄</view>					
				</view>
				<view class="location common" @tap="getlocation">
					<view class="border">
						<image src="../../static/images/cheat/more_location.png" mode=""></image>
					</view>
					<view class="title">定位</view>					
				</view>
				<view class="video common">
					<view class="border">
						<image src="../../static/images/cheat/more_video.png" mode=""></image>
					</view>
					<view class="title">视频</view>					
				</view>
				<view class="file common">
					<view class="border">
						<image src="../../static/images/cheat/more_file.png" mode=""></image>
					</view>
					<view class="title">文件</view>					
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"more",
		data() {
			return {
			};
		},
		methods:{
			//这里是否需要将图片 传递给父组件？
			//或上传到服务器，刷新聊天记录？
			choicePhoto(e){
				// 选择图片然后使用send_more将数据传递
				let count=0;
				e=='album'?count=9:count=1;
				const self=this
				// this.$emit('more_send')
				uni.chooseImage({
					count: count, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: [e], //从相册选择
					success(res){
						const 	filePaths=res.tempFilePaths
						// console.log(JSON.stringify(res.tempFilePaths));
						for(let i=0;i<filePaths.length;i++){
							// console.log(filePaths.length,'test')
							self.$emit('send_more',filePaths[i],1)
						}
					}
				});
			},
			getlocation(){
				// //获得经纬度
				// uni.getLocation({
				// 	type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				// 	success: function (res) {
				// 		//成功获取到经纬度
				// 		const latitude = res.latitude;
				// 		const longitude = res.longitude;
				// 		//通过经纬度 会使用火速及内置地图查看位置。
				// 		// uni.openLocation({
				// 		// 	latitude: latitude,
				// 		// 	longitude: longitude,
				// 		// 	success: function () {
				// 		// 		console.log('success');
				// 		// 	}
				// 		// });
				// 	}
				// });
				//地图模块选择位置 
				uni.chooseLocation({
					//这里的回调函数用箭头函数拿到this
					success: res=> {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：22.975327' + res.latitude);
						console.log('经度：113.841771' + res.longitude);
						//types表示位置信息
						let msg={
							address:res.address,
							location:res.name,
							latitude:res.latitude,
							longitude:res.longitude
						}
						//文件格式3表示地图消息
						this.$emit('send_more',msg,3)
					}
				});
	}
		}
	}
</script>

<style lang="scss">
.container{
	
	height: 400rpx;
	width: 750rpx;
	.option{
		padding:10rpx 40rpx;
		display: flex;
		
		flex-wrap:wrap;
		.common{
			margin:10rpx 18rpx;
			height: 160rpx;
			width: 130rpx;
			.border{
				border: 1px solid;
				background-color: wheat;
				height: 120rpx;
				width: 120rpx;
				border-radius: 24rpx;
				position: relative;
				image{
					// transform: translate(0,20%);
					// margin: 0 auto;
					// display: block;
					width: 58rpx;
					height: 58rpx;
					position: absolute;
					top: 50%;
					right: 50%;
					padding: 6rpx;
					border: 2rpx dashed;
					transform: translate(50%,-50%);
				}
			}
		}
		.title{
			padding-top: 8rpx;
			color: gray;
			font-size: 26rpx;
			text-align: center;
		}
		
	}
}

</style>